<template>
    <div class="container">
        <div class="top">
            <Card style="background-color: #c8ebfb;height:70px;padding-left: 10%" >
                <div style="width: 40%;height: 70px;float: left">
                    <p style="text-align: center;font-size: 25px;float: right;">纳入资金</p>
                </div>
                <div style="width: 60%;height:70px;float: left">
                    <div style="width: 20%;height: 70px;float: left;font-size: 25px;text-align: center;">{{zjList}}</div>
                    <div style="width: 7%;height: 70px;float: left;font-size: 25px;text-align: center;">元</div>
                </div>
            </Card>
        </div>
        <div class="left">
            <div class="lt">
                <Card style="height:300px;" >
                    <div style="width: 85%;height: 280px;float: left" id="bingtu"></div>
                </Card>
            </div>
            <div class="lb">
                <Card style="height:300px;" >
                    <div style="width: 80%;height: 270px;float: left;" id="xxzx"></div>
                </Card>
            </div>
        </div>
        <div class="right">
            <div class="rt">
                <div style="width: 100%;height: 300px;float: left">
                    <Card  style="height: 300px;width: 100%">
                        <div style="width: 85%;height: 280px;float: left" id="youliang"></div>
                    </Card>
                </div>
            </div>
            <div class="rb">
                <div style="width: 100%;height: 300px;float: left">
                    <Card  style="height: 300px;width: 100%">
                        <div style="width: 80%;height: 270px;float: left;" id="zhexian"></div>
                    </Card>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import { getCountNum, getCountProblemList, getCountTypeList, getMoneyYearList, getProblemNameList } from '@/api/user'

export default {

  name: 'basic-information',

  data () {
    return {
      zjList: 0,
      dwList: [],
      dwwtList: [],
      dwListCount: 0,
      dwwtListCount: 0,
      sjzjCount: 0,
      sjtsCount: 0,
      xem: [],
      xen: []
    }
  },

  props: {

  },

  components: {

  },

  computed: {

  },

  methods: {
    compare (property) {
      return function (a, b) {
        var value1 = a[property]
        var value2 = b[property]
        return value1 - value2
      }
    },
    async init () {
      getCountNum().then(ret => {
        // console.log(ret.data.data[0].money, 'ret!!!!!!!')
        // this.zjList = Math.abs(ret.data.data.money)
        this.zjList = ret.data.data[0].money
        // console.log(this.zjList)
      })
      getMoneyYearList().then(ret => {
        console.log(ret, 'ret!@@@!!!')
        let yf = []
        let sl = []
        for (let i = 0; i < ret.data.data.length; i++) {
          yf.push(ret.data.data[i].YY)
          sl.push(ret.data.data[i].money)
        }
        this.zhexian(yf, sl)
        console.log(yf, 'yf!!!!!!!!!')
      })
      getProblemNameList().then(ret => {
        console.log(ret, 'ret######')
        let zjts = []
        let zjzs = []
        let wtname = []
        for (let i = 0; i < ret.data.data.length; i++) {
          zjts.push(ret.data.data[i].number)
          zjzs.push(ret.data.data[i].money)
          wtname.push(ret.data.data[i].problemName)
        }
        console.log(zjts, '资金条数@#')
        console.log(zjzs, '资金总数@#')
        console.log(wtname, '问题名称@#')
        this.xxzx(zjts, zjzs, wtname)
      })
      getCountProblemList().then(ret => {
        this.dwwtListCount = ret.data.data[0].longSize
        this.dwListCount = ret.data.data[0].companyNumber
        console.log(this.dwwtListCount, '存在问题单位数量')
        this.bingtu(this.dwwtListCount, this.dwListCount)
      })
      getCountTypeList().then(ret => {
        let ylList = ret.data.data
        let qiyouList = []
        let chaiyouList = []
        for (let i = 0; i < ylList.length; i++) {
          if (ylList[i].type === '汽油') {
            qiyouList.push(ylList[i])
          }
        }
        qiyouList = qiyouList.sort(this.compare('business_date'))
        let qiyouNum = []
        let yearList = []
        for (let i = 0; i < qiyouList.length; i++) {
          qiyouNum.push(qiyouList[i].fuel)
          yearList.push(qiyouList[i].business_date)
        }
        for (let i = 0; i < ylList.length; i++) {
          if (ylList[i].type === '柴油') {
            chaiyouList.push(ylList[i])
          }
        }
        chaiyouList = chaiyouList.sort(this.compare('business_date'))
        let chaiyouNum = []
        for (let i = 0; i < chaiyouList.length; i++) {
          chaiyouNum.push(chaiyouList[i].fuel)
        }
        this.youliang(qiyouNum, chaiyouNum, yearList)
      })
    },
    youliang (qiyouNum, chaiyouNum, yearList) {
      let myChart = echarts.init(document.getElementById('youliang'))
      var posList = [
        'left', 'right', 'top', 'bottom',
        'inside',
        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
      ]

      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: echarts.util.reduce(posList, function (map, pos) {
            map[pos] = pos
            return map
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      }

      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          var labelOption = {
            normal: {
              rotate: app.config.rotate,
              align: app.config.align,
              verticalAlign: app.config.verticalAlign,
              position: app.config.position,
              distance: app.config.distance
            }
          }
          myChart.setOption({
            series: [{
              label: labelOption
            }, {
              label: labelOption
            }, {
              label: labelOption
            }, {
              label: labelOption
            }]
          })
        }
      }

      var labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
          name: {
            textBorderColor: '#fff'
          }
        }
      }

      let option = {
        title: {
          text: '油量使用统计',
          left: 'center',
          align: 'right'
        },
        color: ['#006699', '#e5323e'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['汽油', '柴油'],
          bottom: 12
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: yearList
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '汽油',
            type: 'bar',
            label: labelOption,
            data: qiyouNum
          },
          {
            name: '柴油',
            type: 'bar',
            label: labelOption,
            data: chaiyouNum
          }
        ]
      }

      myChart.setOption(option)
    },
    bingtu (dwwtListCount, dwListCount) {
      let myChart = echarts.init(document.getElementById('bingtu'))
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} '
        },
        legend: {
          center: 'cneter',
          top: '20px',
          data: ['单位总数', '存在问题单位']
        },
        series: [
          {
            name: '数量',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: dwwtListCount, name: '存在问题单位' },
              { value: dwListCount, name: '单位总数' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    xxzx (zjts, zjzs, wtname) {
      // var category = ['小额消费购物', '超量加油', '异地加油', '一日多次加油', '节假日加油', '汽柴油混加']
      // var lineData = zjzs
      // var barData = zjts
      let myChart = echarts.init(document.getElementById('xxzx'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['涉及资金条数', '涉及资金总数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: wtname
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '涉及资金条数',
            type: 'line',
            // stack: '总量',
            areaStyle: {},
            data: zjts
          },
          {
            name: '涉及资金总数',
            type: 'line',
            // stack: '总量',
            areaStyle: {},
            data: zjzs
          }
        ]
      }
      myChart.setOption(option)
    },
    zhexian (yf, sl) {
      let myChart = echarts.init(document.getElementById('zhexian'))
      let option = {
        // title: {
        //   text: '每年纳入资金统计',
        //   left: 'center'
        // },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['每年纳入资金']

        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: yf
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '每年纳入资金',
            type: 'line',
            stack: '总量',
            data: sl
          }
        ]
      }
      myChart.setOption(option)
    }
    /* cheliang (arr) {
              let myChart = echarts.init(document.getElementById('cheliang'))
              let option = {
                title: {
                  text: '车辆情况',
                  left: 'center'
                },
                tooltip: {
                  trigger: 'item'
                },
                legend: {
                  // orient: 'vertical',
                  // top: 'middle',
                  bottom: 12,
                  left: 'center',
                  data: arr
                },
                series: [
                  {
                    name: '车辆情况',
                    type: 'pie',
                    radius: '65%',
                    center: ['50%', '50%'],
                    selectedMode: 'single',
                    data: arr,
                    emphasis: {
                      itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    }
                  }
                ]
              }
              myChart.setOption(option)
            } */
  },

  watch: {

  },

  mounted () {
    this.init()
    this.youliang()
    this.bingtu()
    this.xxzx()
    this.zhexian()
    // this.youka()
    // this.cheliang()
  }

}
</script>

<style scoped>
    .container{
        width: 100%;
        /*height: 600px;*/
        height: 600px;
        /*margin-top: 45px;*/
        /*border: 1px solid black;*/
    }
    .top{
        width: 100%;
        height: 70px;
        /*border: 1px solid black;*/
    }
    .left{
        width: 48%;
        /*border: 1px solid black;*/
        /*height: 600px;*/
        height: 600px;
        float: left;
    }
    .right{
        width: 48%;
        /*height: 600px;*/
        /*border: 1px solid red;*/
        height: 400px;
        float: left;
        margin-left: 3%;
    }
    .lt{
        width: 100%;
        /*border: 1px solid black;*/
        height: 300px;
    }
    .lc{
        width: 100%;
        /*border: 1px solid black;*/
        height: 200px;
        margin-top: 5px;
    }
    .lb{
        width: 100%;
        /*border:1px saddlebrown solid;*/
        height: 300px;
        margin-top: 25px;
    }
    /*.lb{*/
    /*    width: 100%;*/
    /*    !*border: 1px solid red;*!*/
    /*    height: 180px;*/
    /*    margin-top: 25px;*/
    /*}*/
    .rt{
        width: 100%;
        /*border: 1px solid red;*/
        height: 300px;
    }
    .rb{
        width: 100%;
        /*border: 1px solid red;*/
        height: 300px;
        margin-top: 25px;
    }
    .ivu-card {
        display: block;
        background: #fff;
        border-radius: 4px;
        font-size: 14px;
        position: relative;
        transition: all .2s ease-in-out;
        height: 180px;
    }
</style>
